<template>
  <el-dialog
    v-model="state.visible"
    title="科室医师列表"
    width="70%"
    top="5vh"
  >
    <el-table :data="state.doctorList" border stripe v-loading="state.loading">
      <el-table-column prop="nickname" label="医师姓名" width="120" />
      <el-table-column prop="sex" label="性别" width="80">
        <template #default="{row}">
          {{ getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX).find(item => item.value === row.sex)?.label }}
        </template>
      </el-table-column>
      <el-table-column label="肖像" width="100">
        <template #default="{row}">
          <el-image
            :src="row.avatar"
            style="width: 60px; height: 60px"
            :preview-src-list="[row.avatar]"
            fit="cover"
          />
        </template>
      </el-table-column>
      <el-table-column prop="doctorType" label="医师类型" width="120"/>
      <el-table-column prop="cost" label="挂号费" width="120" />
      <el-table-column prop="remark" label="医师介绍" />

      <el-table-column prop="workYears" label="工作年限" width="120" />
    </el-table>
    <template #footer>
      <el-button @click="state.visible = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import * as DoctorApi from '@/api/medical/doctor'
import { useMessage } from '@/hooks/web/useMessage'

const message = useMessage()

// 定义状态对象
const state = reactive({
  doctorList: [] as any[],
  visible: false,
  loading: false
})

const open = async (deptId: number) => {
  state.visible = true
  state.loading = true
  try {
    console.log('请求参数:', { deptId }); // 打印请求参数
    const response = await DoctorApi.getDoctorInDept(deptId)
    state.doctorList = response
    message.success(`已加载该科室下${response.length}位医师`)
  } catch (error) {
    console.error('获取医师列表失败详情:', {
      error
    });
    console.error('获取医师列表失败:', error)
    message.error('获取医师列表失败')
  } finally {
    state.loading = false
  }
}

// 暴露open方法供父组件调用
defineExpose({
  open,
  visible: state.visible
})
</script>